<style include="cr-shared-style shimless-rma-shared">
  .small-icon {
    height: 30px;
    width: 30px;
  }
</style>

<base-page orientation="column">
  <div slot="header">
    <h1>[[i18n('welcomeTitleText')]]</h1>
    <div>[[i18n('beginRmaWarningText')]]</div>
    <div id="verificationMessage">
      <paper-spinner-lite id="busyIcon" hidden$="[[!verificationInProgress_]]"
        active>
      </paper-spinner-lite>
      <iron-icon id="verificationIcon"
        icon="[[getVerificationIcon_(isCompliant_)]]"
        hidden$="[[verificationInProgress_]]" class="small-icon">
      </iron-icon>
      <span hidden$="[[!verificationInProgress_]]">
        [[i18n('validatingComponentsText')]]
      </span>
      <span hidden$="[[verificationInProgress_]]">
        <span hidden$="[[!isCompliant_]]">
          [[i18n('validatedComponentsSuccessText')]]
        </span>
        <span inner-h-t-m-l="[[verificationFailedMessage_]]"
            hidden$="[[isCompliant_]]">
        </span>
      </span>
    </div>
  </div>
  <div slot="body">
    <!-- TODO(gavindodd): Replace with real image -->
    <iron-icon icon="shimless:shimless-placeholder" class="large-icon">
    </iron-icon>
  </div>
</base-page>

<cr-dialog id="unqualifiedComponentsDialog" on-cancel="closeDialog_"
    ignore-popstate>
  <div slot="title">[[i18n('unqualifiedComponentsTitle')]]</div>
  <div slot="body" id="dialogBody">[[componentsList_]]</div>
  <div slot="button-container">
    <cr-button class="action-button" on-click="closeDialog_">
      [[i18n('okButtonLabel')]]
    </cr-button>
  </div>
</cr-dialog>
